body {
  background: url(../img/index-back.jpg) no-repeat;
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
}

.cover {
  padding-top: 160px;
  padding-bottom: 60px;
  height: 500px;
  width: 80%;
  margin-left: 10%
}

.cover h1,h2{
  color: #ffffff;
  text-align: center;
  margin-top: 40px;
}

.cover-title {
  font-size: 50px;
}

.container-fluid h1 {
  margin-top: 60px;
  text-align: center;
}

.row {
  background-color: #ffffff;
}

.logo-s {
  width: 150px;
  height: 150px;
  display: block;
  margin: 30px auto;

}

.logo-r {
  width: 280px;
  height: auto;
  display: block;
  margin: 70px auto;

}

.word {
  position: relative;
  text-align: center;
  width: 240px;
  margin: auto;
  cursor: pointer;
  overflow: hidden;
  transition-duration: 0.4s;
}

.html {
  color:#f99d00;
}

.css {
  color:#0667c1;
}

.js {
  color: #0d6704;
}

.boot {
  color: #5f0596;
}

.recommend {
  text-align: center;
  padding: 40px;
}

.btn {
  width: 220px;
  color: #ffffff;
  text-decoration: none;
  background-color: #0082ec;
  font-size: 15px;
  box-shadow: 0px 5px 8px #055ca3;
  margin-top: 20px;
}

.design {
  padding: 40px;
}

.design h1,h2 {
  color: #ffffff;
}

.design-title {
  color: #3d3d3d;
  margin-top: 40px;
  text-align: center;
}

.design-logo {
  height: auto;
  text-align: center;
}

.design-logo img {
  width: 300px;
  height: auto;
  margin-bottom: -50px;
  position: relative;
  border-bottom: 0;
}

.ring-out {
  width:300px;
  height: 300px;
  margin: 30px auto;
}

.ring {
  width: 280px;
  height: 280px;
  border: 4px solid #0082ec;
  border-radius: 140px;
  margin-left: 8px;
  margin-top: 8px;
  cursor: pointer;
  position: absolute;
}

.circle {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  text-align: center;
  margin: -30px;
}

.circle span{
  color: white;
  font-size: 20px;
  height: 20px;
  position: relative;
  top: 16px;
}

.c1 {
  background-color: #06a102;
  position: absolute;
  left: 50%;
  box-shadow: 0px 8px 8px #076b04;
  transition-duration: 0.6s;
}

.c2 {
  background-color: #f571ec;
  position: absolute;
  left: 19px;
  top: 210px;
  box-shadow: 0px 8px 8px #913c8c;
  transition-duration: 0.6s;
}

.c3 {
  background-color: #7e7c7c;
  position: absolute;
  right: 19px;
  top: 210px;
  box-shadow: 0px 8px 8px #4b4b4b;
  transition-duration: 0.6s;
}

.txt {
  color: #fff;
  width: 170px;
  height: 130px;
  text-align: center;
  margin-left: -85px;
  margin-top: -65px;
  position: absolute;
  left: 50%;
  top: 50%;
}

.txt h3 {
  color:#464646;
  text-align: center;
}

h3 {
  text-align: center;
}

.design-btn {
  margin-left: -110px;
  position: relative;
  left: 50%;
  margin-bottom: 20px;
}

.works {
  height: 200px;
  background: linear-gradient(rgba(255, 255, 255, 1),rgba(0,40,100,0.3));
}

.works2 {
  height: 200px;
  background: linear-gradient(rgba(0,40,100,0.3),rgba(255, 255, 255, 1));
}


.left-word ul {
  font-size: 15px;
  color: #fff;
  box-shadow: 3px 5px 8px rgba(32, 32, 32, 0.73);
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #0e9ded;
  list-style: none;
}

.page {
  text-align: center;
  padding-top: 20px;
}

.page img {
  margin: 0 auto;
  display: block;
}

.page img {
  width:240px;
  height: auto;
  margin: auto auto;
}

.btn2 {
  background-color: #019410;
  box-shadow: 0px 8px 8px #115919;
  margin-bottom: 20px;
}

.join-us {
  width: 300px;
  height: 300px;
  margin: 120px auto;
}

.join-us h2 {
  color: #656565;
}

.join-us img {
  width: 200px;
  height: 200px;
  margin-left: -100px;
  position: relative;
  left: 60%;
  top: 50%;
}

/*静态元素ｃｓｓ*/


.blue-board {
  position: absolute;
  width: 0;
  height: 0;
  background-color: #44a9fc;
  border-radius: 350px;
  transition-duration: 0.6s;
  opacity: 0;
}

.learn-go {
  width: 240px;
  height: 80px;
  position: absolute;
  top: 40px;
  left: -230px;
  opacity: 0;
  transition-duration: 0.6s;
}

.learn-go h4 {
  color:#fff;
}

.btn3 {
  background-color: #fc70ff;
  box-shadow:0px 5px 8px #a90aac;
}/*前端技能动态元素*/

.ring-back {
  width: 280px;
  height: 280px;
  border-radius: 140px;
  margin-left: 8px;
  margin-top: 8px;
  position: absolute;
  overflow: hidden;
}

.c1-back {
  width: 1px;
  height: 1px;
  background-color: #06a102;
  position: absolute;
  left: 50%;
  transition-duration: 0.6s;
  opacity: 0;
}

.c2-back {
  width: 1px;
  height: 1px;
  opacity: 0;
  background-color: #f571ec;
  position: absolute;
  left: 19px;
  top: 210px;
  transition-duration: 0.6s;
}

.c3-back {
  width: 1px;
  height: 1px;
  opacity: 0;
  background-color: #7e7c7c;
  position: absolute;
  right: 19px;
  top: 210px;
  transition-duration: 0.6s;
}
/*design动态元素*/

.step {
  margin-bottom: 40px;
}

.join-con {
  width: 0px;
  height: auto;
  position: relative;
  left: 50%;
  transition-duration: 0.2s;
}

.start {
  width: 60px;
  height: 60px;
  border-radius: 30px;
  text-align: center;
  position: absolute;
  left: -30px;
  top: -10px;
  cursor: pointer;
}

.start span {
  font-size: 15px;
  width: 60px;
  height: 20px;
  position: relative;
  top: 18px;;
  color: #fff;
}

.txt-head {
  width: 0px;
  height: 40px;
  box-shadow: 5px 6px 8px #343434;
  transition-duration: 0.2s;
  border-radius: 5px;
}

.join-txt {
  width: 0px;
  height: 0;
  transition-duration: 0.2s;
  box-shadow: 5px 6px 8px #343434;
  border-radius: 5px;
}

.join-txt p {
  width: 240px;
  margin: 0 auto;
  color: #fff;
}

.start1 {
  background-color: #06a102;
  box-shadow: 8px 0px 8px #076b04;
}

.start1:hover {
  background-color: #14ff00;
}

.start1:active {
  background-color: #0d4908;
}

.txt-head1{
  background-color:  #06a102;
}

.join-txt1 {
  background-color: #128508;
}

.start2 {
  background-color: #f571ec;
  box-shadow: 8px 0px 8px #913c8c;
}

.start2:hover {
  background-color: #fc08ed;
}

.start2:active {
  background-color: #882e82;
}

.txt-head2{
  background-color:  #f571ec;
}

.join-txt2 {
  background-color: #be2db5;
}

.start3 {
  background-color: #7e7c7c;
  box-shadow: 8px 0px 8px #4b4b4b;
}

.start3:hover {
  background-color: #a3a1a1;
}

.start3:active {
  background-color: #333333;
}

.txt-head3{
  background-color:  #7e7c7c;
}

.join-txt3 {
  background-color: #616060;
}/*加入方式动态元素*/


/*翻页ｃｌａｓｓ*/
.logo-s,.logo-r {
  position: relative;
  top: 120px;
  opacity: 0;
  transition-duration: 0.6s;
}

.word {
  position: relative;
  top: 120px;
  opacity: 0;
}

.learn-web {
  opacity: 0;
  transition-duration: 2s;
}

.ring-out {
  opacity: 0;
  transform: rotate(180deg);
  transition-duration: 1s;
}

.design-btn-a {
  opacity: 0;
  transition-duration: 1s;
}

.left-word {
  position: relative;
  top: 120px;
  opacity: 0;
  transition-duration: 0.6s;
}

.page {
  position: relative;
  top: 120px;
  opacity: 0;
  transition-duration: 0.6s;
}

.join-pointer {
  transition-duration: 1s;
}

.start {
  position: absolute;
  top: -50px;
  opacity: 0;
  transition-duration: 1s;
}/*ｊｓ动态元素*/


/*动态标题*/
.title-top {
  position: relative;
  top: -50px;
  transition-duration: 0.4s;
  opacity: 0;
}

.title-bottom {
  position: relative;
  top: 50px;
  transition-duration: 0.4s;
  opacity: 0;
}